<script setup lang="ts">
defineProps<{ id: string }>();
</script>

<template>
  <ConfirmDialog>
    <template #title>重置密码</template>

    <div class="flex justify-between items-center gap-x-1">
      <label class="flex justify-start items-center gap-x-1 grow">
        <div class="shrink-0">新密码：</div>
        <div class="border rounded grow">
          <input
            class="bg-transparent block w-full px-2 py-1.5 outline-none placeholder:text-sm lg:placeholder:text-base"
            required
            placeholder="输入或随机生成新密码"
          />
        </div>
      </label>

      <button
        class="flex justify-start items-center gap-x-1 shrink-0 border bg-teal-600 rounded text-white px-2 py-1.5"
        type="button"
      >
        <Icon name="uil:dice-four" class="rotate-45" />
        <div>随机</div>
      </button>
    </div>
  </ConfirmDialog>
</template>
